<template>
    <div class="kekou">
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2293181_t8d7i46j9vp.css">
        <div class="hao">
           <p>账号</p> 
        </div>
        <div class="hui"></div>
        <ul class="jifang">
            <li><i class="iconfont icon-xinfeng"></i>  <span>消息中心</span>  <b class="iconfont icon-jiantou_liebiaoxiangyou"></b> </li>
        </ul>
        <div class="anquan"></div>

        <ul class="geren">
            <li class="li">
               <i class="iconfont icon-biaoqiankuozhan_wode-285"></i> <span>个人资料</span> <b class="iconfont icon-jiantou_liebiaoxiangyou"></b>
            </li>

             <li>
               <i class="iconfont icon-icon-test"></i> <span>学习兴趣</span> <b class="iconfont icon-jiantou_liebiaoxiangyou"></b>
            </li>
        </ul>
        <div class="jiaoyu"></div>

        <ul class="yuer">
            <li class="yyy">
                 <i class="iconfont icon-yue"></i> <span>我的余额</span> <b class="iconfont icon-jiantou_liebiaoxiangyou"></b>
            </li>

            <li>
                <i class="iconfont icon-dingdan"></i> <span>我的订单</span> <b class="iconfont icon-jiantou_liebiaoxiangyou"></b>
            </li>
        </ul>

        <div class="chukou"></div>

        <ul class="it" @click="change">
            <li>
                <i class="iconfont icon-shezhi"></i> <span>设置</span> <b class="iconfont icon-jiantou_liebiaoxiangyou"></b>
            </li>
        </ul>
        <div class="dalian"></div>
        <ul class="jieyue"> 
            <li class="next">
                <i class="iconfont icon-yijian"></i> <span>意见反馈</span> <b class="iconfont icon-jiantou_liebiaoxiangyou"></b>
            </li>

            <li>
                <i class="iconfont icon-pingjia-01"></i> <span>给网易云课堂评价</span> <b class="iconfont icon-jiantou_liebiaoxiangyou"></b>
            </li>
        </ul>

        <div class="qing"></div>
    </div>
</template>

<script>
    export default {
        methods: {
           change(){
               window.localStorage.removeItem('user')
           }
        },
    }
</script>

<style scoped>
.kekou{
    color: #727070;
}
.qing{
    width: 100%;
    height: 150px;
    background: #f7f7f7;
}
.jieyue{
    width: 100%;
}
.jieyue li{
    width: 95%;
    height: 50px;
    margin: 0 auto;
    line-height: 50px;
}
.jieyue i{
    float: left;
    font-size: 30px;
}
.jieyue span{
    margin-left: 10px;
}
.jieyue b{
    float: right;
    font-size: 25px;
}
.next{
    border-bottom: 1px solid rgb(165, 164, 164);
}
.dalian{
    width: 100%;
    height: 10px;
    background: #f7f7f7;
}
.it{
    width: 100%;
}
.it li{
    width: 95%;
    margin:  0 auto;
    height: 50px;
    line-height: 50px;
}
.it i{
    float: left;
    font-size: 30px;
}
.it span{
    margin-left: 10px;
}
.it b{
    float: right;
    font-size: 25px;
}
.chukou{
    width: 100%;
    height: 10px;
    background: #f7f7f7;
}
.yuer{
    width: 100%;
}
.yuer li{
    width: 95%;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
}
.yuer i{
    font-size: 30px;
    float: left;
}
.yuer span{
    margin-left: 10px;
}
.yuer b{
    float: right;
    font-size: 25px;
}
.yyy{
    border-bottom: 1px rgb(151, 150, 150) solid;
}
.jiaoyu{
    width: 100%;
    height: 10px;
    background: #f7f7f7;
}
.geren{
    width: 100%;

}
.geren li{
    width: 95%;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
 
}
.li{
       border-bottom: 1px solid rgb(156, 154, 154);
}
.geren b{
    float: right;
    font-size: 25px;
}
.geren i{
    font-size: 30px;
    float: left;
}
.geren span{
    margin-left: 10px;
    display: inline-block;
    /* margin-top: 5px; */
}
.hao{
    width: 100%;
    text-align: center;
    height: 40px;
    background: #fff;
    overflow: hidden;
}
.hao P{
    margin-top: 10px;
}
.hui{
    width: 100%;
    height: 5px;
    background: #f7f7f7;
}
.jifang i{
    font-size: 25px;
    /* margin-top: 5px; */
    float: left;
}
.jifang{
    width: 100%;
}
.jifang li{
    width: 95%;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    background: #fff;
    /* font-size: 20px; */
    /* align-items: center; */
    /* vertical-align:middle; */
}
.jifang i{
    font-size: 30px;
}
.jifang span{
    display: inline-block;
    margin-left: 10px;
}
.jifang b{
    /* text-align: right; */
    font-size: 25px;
    float: right;
}
.anquan{
    width: 100%;
    height: 10px;
    background: #f7f7f7;
}
</style>